<template>
  <div class="rongmei">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <!-- <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item> -->
        <van-swipe-item style="height: 200px;" v-for="(image, index) in banners" :key="index">
          <van-image width="100%" height="200px" :src="image" />
        </van-swipe-item>
    </van-swipe>
    <div style="display: flex;width: 100%;height: 100px;">
      <div style="width: 33.3%;display: flex;flex-direction: column;height: 100px;justify-content: center;align-items: center;">
        <van-image width="50" height="50" :src="require('@/assets/images/rongmei/tel-icon.png')" />
        <div class="nav-title">看电视</div>
      </div>
      <div style="width: 33.3%;display: flex;flex-direction: column;height: 100px;justify-content: center;align-items: center;">
        <van-image width="50" height="50" :src="require('@/assets/images/rongmei/board-icon.png')" />
        <div class="nav-title">听广播</div>
      </div>
      <div style="width: 33.3%;display: flex;flex-direction: column;height: 100px;justify-content: center;align-items: center;">
        <van-image width="50" height="50" :src="require('@/assets/images/rongmei/paper-icon.png')" />
        <div class="nav-title">读报纸</div>
      </div>
    </div>
    <div style="display: flex;width: 100%;height: 50px;">
      <div style="width: 50%;height: 50px;display: flex;justify-content: center;">
        <div style="width: 85%;height: 40px;display: flex;justify-content: center;align-items: center;box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;">
          <van-image width="46" height="46" :src="require('@/assets/images/rongmei/reporter-icon.png')" />
          <div style="margin-left: 5px;">找记者</div>
        </div>
      </div>
      <div style="width: 50%;height: 50px;display: flex;justify-content: center;">
        <div style="width: 85%;height: 40px;display: flex;justify-content: center;align-items: center;box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px;">
          <van-image width="46" height="46" :src="require('@/assets/images/rongmei/information-icon.png')" />
          <div style="margin-left: 5px;">情报站</div>
        </div>
      </div>
    </div>
    <div style="width: 100%;display: flex;justify-content: center;margin-top: 10px;">
      <van-image width="93%" height="60" :src="require('@/assets/images/rongmei/cloud-home.jpg')" />
    </div>
    <div style="width: 100%;height: 5px;background-color: #F5F5F5;margin-top: 20px;"></div>
    <div v-for="(value, key) in listData" :key="key">
      <div style="width: 100%;height: 100px;margin-top: 10px;display: flex;align-items: center;">
        <van-image style="margin-left: 15px;" width="25%" height="55" :src="value.imageUrl" />
        <div style="width: 70%;">
          <div style="margin-left: 15px;">{{value.title}}</div>
          <div style="margin-left: 15px;color: #BFBFBF;font-size: 10px;margin-top: 5px;">{{value.time}}</div>
        </div>
      </div>
      <div style="width: 100%;height: 1px;background-color: #F5F5F5;margin-top: 0px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
        banners: [
          require('@/assets/images/home/header/header-2.png'),
          require('@/assets/images/home/header/header-4.jpg'),
          require('@/assets/images/home/header/header-1.jpg'),
          require('@/assets/images/home/header/header-3.jpg')
        ],
        listData: [
          {
            imageUrl: 'http://sgrmtwx.shouguang.gov.cn/api-files/20201119/08/1605746044557/1605746044557.jpg',
            title: '玉马遮阳首发上市经深交所创业板上市委员会审议会议通过',
            time: '11-19 08:34'
          },
          {
            imageUrl: require('@/assets/images/rongmei/publish-1.png'),
            title: '寿光市统计局到防水卷材企业进行现场调研',
            time: '11-19 10:35'
          }
        ]
      }
  }
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
}
.rongmei{
  .nav-title{
    padding: 10px 0;
  }
}
</style>
